<template>
  info firend: {{ info.title.firend.join(',') }}
  <br />
  <button @click="btnClick">改变info</button>
</template>

<script>
import { computed, reactive, ref, watch } from 'vue'
export default {
  setup() {
    const info = reactive({
      name: 'qq',
      age: 18,
      title: {
        firend: ['jd'],
      },
    })
    const btnClick = () => {
      info.title.firend.push('zz')
    }
    // 传入参数为reactive的时候默认为深度监听
    watch(info, (newV, oldV) => {
      console.log('reactive直接监听默认： ', newV, oldV)
    })
    watch(
      () => info.title,
      (newV, oldV) => {
        console.log('get函数监听默认为浅层比较： ', newV, oldV)
      }
    )
    watch(
      () => info.title,
      (newV, oldV) => {
        console.log('get函数监听deep: true为深层比较： ', newV, oldV)
      },
      {
        deep: true,
        // 立即执行
        immediate: true, 
      }
    )
    return {
      info,
      btnClick,
    }
  },
}
</script>
<style scoped></style>
